import {messages} from "share/common";
import React from 'react'
import ExportModal from "components/template/export-modal/export-modal";
import { Input, message, Tag, Form, Table, DatePicker, Button} from 'antd'

const {RangePicker} = DatePicker;

import 'styles/scan-receive/scan-receive.scss'
import ScanReceiveService from 'containers/scan-receive/scan-receive.service'
class ScanReceive extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sendList: [],
      columns:[ 
      {
        title: '表单名称',
        dataIndex: 'formName',
        key: 'formName',
        width:'200px'
      },
      {
        title: '单号',
        dataIndex: 'businessCode',
        key: 'businessCode',
        width:'200px'
      },
      {
        title: '费用承担公司',
        dataIndex: 'company',
        key: 'company',
        width:'150px'
      },
      {
        title: '信用等级',
        dataIndex: 'applicantCreditRank',
        key: 'applicantCreditRank',
        width:'150px'
      },
      {
        title: '提示',
        dataIndex: 'reason',
        key: 'reason',
        render: text => <span style={{color:'red'}}>{text}</span>,
      }
      ],
      startDate:'',
      endDate:''
    };
  }


  componentDidMount(){
    this.input.focus();
  }

  handlePressEnter = (e) => {
    let { sendList } = this.state;
    ScanReceiveService.receive(e.target.value).then(res => {
      if(res.data.code === '0000'){
        sendList.unshift(res.data);
        message.success(res.data.msg);
      } else {
        message.error(res.data.msg);
      }
      this.props.form.resetFields();
    })
  };
  dataOnChange= (date, dateString)=> {
    this.setState({
      startDate:dateString[0],
      endDate:dateString[1],
    })
  }

  render(){
    const { sendList,columns, startDate, endDate} = this.state;
    return (
      <div className="scan-send">
        <h1>{messages('financial-management.key284'/*扫码收单*/)}</h1>
        {this.props.form.getFieldDecorator('code')(
          <Input onPressEnter={this.handlePressEnter} ref={input => this.input = input} className="input-search"/>
        )}
        <div className="send-area">
          <h3 className="send-title">{messages('financial-management.key285'/*已收到单据*/)}
          <div style={{float:'right',marginLeft:'5px'}}>
          <ExportModal
              type={"btn"}
              btnType="primary"
              exportTitle={messages('financial-management.key146'/*导出搜索数据*/)}
              exportType="SCAN_CODE_RECORD"
              exportCondition={{
                "billCheckSearchCommand":{
                  beginDate:startDate ? startDate +' 00:00:00' : '',
                  endDate: endDate ? endDate + ' 23:59:59' : ''
                }
              }}
              exportCommand={'SCAN_CODE_RECORD'}/>
          </div>
          <span style={{float:'right'}}><RangePicker onChange={this.dataOnChange} /> 
           </span>
          </h3>
          {/* <div className="send-result">
            {sendList.map((item, index) =>
              <Tag color="geekblue" key={index}>{item}</Tag>
            )}
          </div> */}
          <Table dataSource={sendList} columns={columns} scroll={{ y: 350 }}/>
        </div>
      </div>
    )
  }

}

ScanReceive.contextTypes = {
  router: React.PropTypes.object
};

const WrappedScanReceive = Form.create()(ScanReceive);

export default WrappedScanReceive;
